<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<title>{{Lesson Name}}</title>
					
	<link rel="stylesheet" type="text/css" href="skin/theme.css" media="screen" />
	<link rel="stylesheet" type="text/css" href="skin/deck.css" media="screen" />
	<script type="text/javascript" src="lib/jquery-1.6.3.min.js"></script>
	<script type="text/javascript" src="lib/deck-min.js"></script>
	
	<!-- Include Super Simple Skin -->
	<script type="text/javascript" src="lib/Navigation.js"></script>
	<link rel="stylesheet" type="text/css" href="lib/Navigation.css" media="screen" />
	
    <script type="text/javascript" src="lib/jquery.mousewheel-min.js"></script>		
	<script type="text/javascript" src="lib/flowplayer-3.2.12.min.js"></script>
</head>
<body>	                        		         

<div id="wt_container">
		<span class="objective">{{Course Name}}</span>
		<span class="site-title"><img src="skin/logo.jpg" alt="" /></span>       
        
    	<div id="wt_content">
        	<h1 class="lesson-title">{{Lesson Name}}</h1>                      
            <div id="lesson-summary">            	
                <p>{{lesson_summary}}</p>				
			</div>		
			
<div class="skin">
	




<dl class="slidedeck">
<dt></dt>
<dd>
<img src="images/img-1.png"/>
</dd>

<dt></dt>
<dd>
<img src="images/img-2.png"/>
</dd>

<dt></dt>
<dd>
<img src="images/img-3.png"/>
</dd>

<dt></dt>
<dd>
<img src="images/img-4.png"/>
</dd>

<dt></dt>
<dd>
<img src="images/img-5.png"/>
</dd>
</dl>		<!-- end of deck -->

<center>
<span style="margin-bottom: 5px;">
<a id="audio" style="display:block; vertical-align: top; width:400px;height:24px;" href="audio_MP3WRAP.mp3"></a>
</span>
</center>   

</div>          <!-- end of skin div -->
			
										
<br/><br/><br/><br/>		
<div class="lesson">
<!-- Start of Voice Text -->
<p class="caption" id="#caption1"><br/>
This is a test slide.</p>

<p class="caption" id="#caption2"><br/>
This is a slide 2.</p>

<p class="caption" id="#caption3"><br/>
This is a slide 3.</p>

<p class="caption" id="#caption4"><br/>
This is a slide 3.</p>
<!-- End of Voice Text -->
</div>

		
	</div> <!-- End of wt_content-->
<!--<p>Footer</p>-->
</div> <!-- End of wt_container-->

<script type="text/javascript">
		var myDeck = $('.slidedeck').slidedeck({
			 hideSpines: true,
			 index: false,
			 speed: 100, // one second for the sliding to complete
			 scroll: true,   // Allow mousewheel scrolling	
			before: function(deck){
				// Unhide the slide before showing
				alert(deck.current);
			}
		});
</script>

	<script>
	var cuepoints = [3,6];
	var cuepoints_mills = get_cuepoints_millis(cuepoints);
	var cuepoints_rounded = get_cuepoints_rounded(cuepoints_mills);
	// install flowplayer into container
	var audioPlayer = flowplayer("audio", "lib/flowplayer-3.2.16.swf", {
	canvas: {backgroundColor: "#ffffff"},
	
	plugins: {
      controls: {        
		  fullscreen: false,	
		  buttonOffColor: 'rgba(90,90,90,1)',
		  timeBgColor: '#262626',
		  borderRadius: '0',
		  bufferColor: '#445566',
		  buttonColor: '#000000',
		  backgroundColor: '#f8981d',
		  volumeSliderColor: '#D00000',
		  timeBorder: '1px solid rgba(0, 0, 0, 0.3)',
		  sliderGradient: 'none',
		  durationColor: '#ffffff',
		  disabledWidgetColor: '#555555',
		  progressGradient: 'none',
		  buttonOverColor: '#FF0000',
		  bufferGradient: 'none',
		  backgroundGradient: 'none',
		  callType: 'default',
		  tooltipColor: '#C9C9C9',
		  timeColor: '#B1E0FC',
		  sliderColor: '#C9C9C9',
		  progressColor: '#112233',
		  tooltipTextColor: '#D00000',
		  volumeSliderGradient: 'none',
		  autoHide: 'never',
		  opacity: 1.0
		
      },
	  
      audio: {
        url: 'lib/flowplayer.audio-3.2.10.swf'
      }
    },
 
    clip: {
      autoPlay: false,
	  autoBuffering: false,
	  onBeforeBegin: function() {myDeck.goTo(1);},
	  // trigger this function on cuepoint
					onCuepoint: [cuepoints_rounded, function(clip, point) {
						
						cue_idx = cuepoints_rounded.indexOf(point) + 2;						
						if ( cue_idx > 0 ){						
							myDeck.goTo(cue_idx);
						}	
                                               					
					}],
    }
  });
  
	function get_cuepoints_millis(points){
	  var temp = new Array(points.length);
	  for (i=0; i <points.length; i++){
		  temp[i] = points[i] * 1000;
	  }

	  return temp;
	}
	function get_cuepoints_rounded(points){
	  var temp = new Array(points.length);
	  for (i=0; i < points.length; i++){
		rounded_val = Math.round(points[i] / 100) * 100 ;
		temp[i] = rounded_val;
	  }
	  return temp;
	}
</script>

</body>
</html>
